<template>
  <div class="container">
    <el-card>
      <h3 slot="header">账户信息</h3>
      <section class="account-box">
        <span class="account-box__left">
          <img
            class="avtar"
            src="//mbb-pub.oss-cn-hangzhou.aliyuncs.com/img/201612/07/%E4%BD%8D%E5%9B%BE.png"
            alt
          />
          <span>{{getHello()}}！{{user ? user.nickname : ''}}</span>
        </span>
        <span class="account-box__right">
          <span>授权支付宝</span>
          <span>实名认证</span>
          <span>支付密码</span>
          <span>银行卡管理</span>
        </span>
      </section>
    </el-card>
    <el-card>
      <h3 slot="header">资金信息</h3>
      <section class="amount-box">
        <ul>
          <li>
            <i class="el-icon-s-finance"></i>
            <span>账户余额：</span>
            <span class="amount-box__value">{{account ? account.accountBalance : 0}}元</span>
            <el-button size="mini" type="success">提现</el-button>
          </li>
          <li>
            <span>待收金额：</span>
            <span class="amount-box__value">{{account ? account.waitIncomeAmount : 0}}元</span>
          </li>
          <li>
            <span>待收利润：</span>
            <span class="amount-box__value">{{account ? account.waitIncomeProfit : 0}}元</span>
          </li>
          <li>
            <i class="el-icon-s-finance"></i>
            <span>冻结金额：</span>
            <span class="amount-box__value">{{account ? account.freezeAmount : 0}}元</span>
          </li>
          <li>
            <span>已收金额：</span>
            <span class="amount-box__value">0元</span>
          </li>
          <li>
            <span>已收利润：</span>
            <span class="amount-box__value">0元</span>
          </li>
        </ul>
      </section>
    </el-card>
  </div>
</template>
<script >
  import { doVerifyUser } from '@/apis/user';
  import { doGetAccountList } from '@/apis/account';
  import dayjs from 'dayjs';

  export default {
    data() {
      return {
        user: undefined,
        account: undefined
      };
    },
    methods: {
      getHello() {
        const h = dayjs().hour();
        if (h >= 0 && h < 2) return '深夜好';
        else if (h >= 2 && h < 6) return '凌晨好';
        else if (h >= 6 && h < 10) return '上午好';
        else if (h >= 10 && h < 14) return '中午好';
        else if (h >= 14 && h < 18) return '下午好';
        else if (h >= 18 && h < 24) return '晚上好';
      }
    },
    async mounted() {
      const token = this.cache.fetchToken();
      if (!token) this.$router.replace('/');
      const ret = await doVerifyUser(token);
      if (!ret) this.$router.replace('/');
      this.user = this.cache.fetchUser();
      // console.log('get user info---->' + this.user.id.toString());
      const res = await doGetAccountList(this.user.id);
      // console.log(res);
      if (res && res.list.length > 0) {
        // console.log(res.list);
        this.account = res.list[0];
      }
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  .avtar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .el-card {
    margin-bottom: 40px;
    .account-box {
      @include h-btw();
      &__left {
        @include v-center();
      }
      &__right {
        @include v-center();
        span {
          display: block;
          font-size: 12px;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          background-color: $c1;
          color: white;
          border-radius: 50%;
          margin: 0 10px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    .amount-box {
      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        li {
          flex-basis: 33.33%;
          padding: 12px;
          i {
            font-size: 24px;
            color: red;
            margin-right: 5px;
          }
          .el-button {
            margin-left: 12px;
          }
        }
      }
      &__value {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>
